


How to Override the Archive's Automated Chapter Headers

by C Ryan Smith (AiedailEclipsed)



Category: No Fandom
Genre: Fanwork Research & Reference Guides
Language: English
Status: Completed
Published: 2018-11-25
Updated: 2018-11-25
Packaged: 2019-08-29 05:25:01
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 2
Words: 810
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/16737931
Author URL: https://archiveofourown.org/users/AiedailEclipsed/pseuds/C%20Ryan%20Smith
Summary: This is a tutorial/live example on how to override the Archive's automated chapter heading system and define your own (eg remove "Chapter 1: Chapter Title" and insert "Act 1, Verse 1" instead).





	1. Instructions

First, you'll need to create a specialized work skin for **each work** that you want to do this for. To do this, go up to the "Hi, [USERNAME]!" menu at the top of your screen and click the "My Dashboard" link. When the page loads, you should have a page with a sidebar on the left hand side of the page with several links (unless you're using a custom site skin, but if you are, you likely know how to find this already). From there, in the first section of the sidebar, click the "Skins" link; on this new page, you should see a button that says "My Work Skins", click that. From there, click either "Create Work Skin" or edit the existing work skin that you want to add this to.

If you're creating a new skin, be sure to the dropdown is on "Work Skin" and then you'll need to give it a title. Since this requires that each work has its own skin, I'd recommend making something like "WORK TITLE Skin" or similar. You don't need to add a description or an image (applying to make it public won't do anything). Conversely, if you're adding this to an existing skin, you can skip down directly to add more code to your CSS.

The first new piece of CSS you'll need to add has a bit of a caveat, but we'll cover that in a moment. Below is the code which will "remove" the default Archive chapter system.
    
    
    #workskin .chapter.preface.group .title {
      visibility: hidden;
      line-height: 0;
    }

This code specifies that the title class H3 element, in the chapter preface group div will be hidden and the line will effectively be set to take up no space at all. Now, that caveat I was talking about... This code will remove **all** the chapter headers from the entire work the skin applies to. If you just wanted to apply this to one specific chapter for whatever reason, you would need to specify that chapter's ID in between the #workskin and .chapter.preface.group declarations. You do this by adding #chapter-IDNUMBER and substituting the numerical sequence ID number. So, if you wanted to apply this to the first chapter, you'd substitute the number 1. See below for an example of the code again, with this new element.
    
    
    #workskin #chapter-1 .chapter.preface.group .title {
      visibility: hidden;
      line-height: 0;
    }

Now, we've removed the default chapter headings, but how do we add in our new custom headings? Unfortunately, you'll have to use CSS to define each chapter's heading in the code itself. Some things to keep in mind:

  * Because readers can individually disable the work's style, you should **still** set the chapter title in the actual posting interface to something similar or as close to what you want.
  * Like all work skin styles, it will be stripped from downloads -- another reason to set the chapter title in the posting interface to something similar.
  * This might not be 100% with all screen readers. If you use a screen reader, please test this out and let us know in the comments so we can add notes on your experience.



With that out of the way, you can find the code to add the new chapter headings below. Like in our above example, you **have** to specify the chapter ID number or you'll apply the same heading to all chapters within your work.
    
    
    #workskin #chapter-1 .chapter.preface.group .title::after {
      content: "New Chapter Heading";
      visibility: visible;
      line-height: 1em;
      display: block;
    }

So let's break this down a bit. You'll notice that the .title declaration has "::after" following it. This is what is going to allow us to "replace" the default chapter title -- basically, it will make the CSS elements appear immediately after whatever declaration is used. The content property is where you'll write out the text that will appear on the work itself (note: the quotes are necessary and will not appear in the new heading). The visibility property will make sure that we can see it, the line-height property will make sure that it takes up the right amount of space, and the display property will make sure it is in the right place.

And that's it! You'll have to repeat the above code, making the appropriate edits to it in order to add in the new headers.

### Looking for an example?

If you'd like to see the code in action, just click over to the next chapter. This first chapter is an example of what the default system will show. The next chapter will show what this code will do and the code used to do so.


	2. Example

This is the code that we used to do this:
    
    
    #workskin #chapter-2 .chapter.preface.group .title {
      visibility: hidden;
      line-height: 0;
    }
    
    #workskin #chapter-2 .chapter.preface.group .title::after {
      content: "This is an example.";
      visibility: visible;
      line-height: 1em;
      display: block;
    }


End file.
